Tips Menggunakan Latar belakang pada Halaman Web
Hello Semuanya ini untuk bagian 2 Dari bagian 1 yang kemarin sempat tertunda karena banyak nya materi dan begitu detail. untuk itu anda bisa membacanya kembali ya. semangat belajar dan jangan lupa info ke teman yang lain ingin belajar programming. bisa di platform inovasiErby ya. Enjoy life! Tips Menggunakan Latar belakang pada Halaman Web
Umumnya, garis yang muncul di jendela browser memiliki panjang sampai ukuran browser itu sendiri, sedangkan lebarnya kira-kira 2 pixel dengan warna hitam atau abu-abu
Baca Juga >>> Membuat Database di MYSQL Workbench
Menggunakan Warna Latar Belakang dan Latar Depan
Kalau Anda masuk ke situs Google, Anda akan melihat latar belakang . berwarna putih dengan teks-teks berwarna tajam (dalam hal ini warna teks didominasi oleh warna biru). Bisa jadi, sebagian besar Warna-warna dalam sebuah situs merupakan perpaduan latar. Tips Menggunakan Latar belakang pada Halaman Web
belakang putih dengan teks-teks berwarna gelap, seperti hitam dan biru. Kombinasi tersebut membuat teks menjadi lebih mudah dibaca dan karena bersifat umum, para web designer memanfaatkan pola warna serupa.
HTML sendiri mengenali 16 warna standar yang UMUM dipakai Keenam belas warna tersebut adalah:
Keenam belas warna di atas merupakan warna-warna yang secara umum mampu dikenali dengan baik oleh seluruh browser. Dengan demikian, browser-browser itu mampu menampilkan warna yang sama satu dengan lainnya.
Namun dalam prakteknya, keenam belas warna tersebut seringkali masih kurang banyak untuk mengakomodasi kreativitas web designer sehingga kita ingin mendapatkan Warna yang lebih melimpah lagi. Caranya adalah dengan menggunakan nilai-nilai dari konsep warna RGB (red-green-blue). Setiap warna diwakili oleh angka 0 hingga 255. Tiap-tiap warna merepresentasikan campuran komponen warna primer merah, hijau, dan biru sehingga menciptakan warna-warna yang lebih kompleks. Sebagai contoh, jika Anda menggunakan kombinasi warna 0, 0, 255, akan menghasilkan warna biru karena warna biru tampil secara utuh (255) tanpa ada pengaruh dari warna merah (0) dan hijau (0).
Selain menggunakan perpaduan nilai RGB, Anda juga bisa menghadirkan warna memakai sistem hexadecimal masing-masing warna Misalnya saja #FFFFOO. Tips Menggunakan Latar belakang pada Halaman Web
Masalahnya, bagaimana kalau layar monitor yang digunakan oleh mengakses situs Anda tidak mampu menyajikan kompleksitas warna-warna di atas? Walaupun saat ini teknologi layar monitor sudah sedemikian canggih dan mampu menampilkan jutaan warna, namun untuk teknologi masa lalu warna-warna yang tidak bisa ditampilkan sempurna akan disajikan dalam bentuk dithered, yaitu pola-pola yang dibentuk oleh perpaduan dua warna.
Melihat adanya kelemahan seperti di atas, maka dalam dunia desain web dikenal istilah web-safe color, yaitu warna-warna “aman” yang bisa ditampilkan dengan baik hampir di seluruh layar monitor berwarna. Jumlah warna yang termasuk web-safe color sebanyak 216 warna (daftarnya bisa Anda cek di situs | https://www.w3schools.com/colors/colors_hex.asp). Tips Menggunakan Latar belakang pada Halaman Web
Mengatur Warna Latar Belakang
Apabila Anda ingin mengatur warna latar belakang untuk seluruh cukup gunakan atribut style-”background atribut itu di dalam tag <body>. Sebagai script HTML seperti berikut ini:
Anda juga bisa mengisi atribut di atas dengan nilai RGB atau kode hexadecimal. Gunakan bantuan situs-situs yang telah ditampilkan di atas untuk menentukan warna yang akan muncul di halaman web.
Mengatur Warna Latar Depan
Apa yang dimaksud dengan warna latar depan? Warna latar depan adalah warna default pada teks yang ada di dalam halaman atau page yang sedang Anda buat. Untuk mengubah warna latar depan, gunakan atribut style=”color; color” dan letakkan di dalam tag <body> berdampingan dengan atribut untuk mengatur warna latar belakang sebagai contoh jika anda ingin mengubah warna teks menjadi warna kuning, tulislah script HTML seperti ini : Tips Menggunakan Latar belakang pada Halaman Web
Jangan lupa pisahkan atribut background-color dan color dengan tanda semicolon atau titik koma.
Foto atau Gambar sebagai Latar Belakang
Sering kali, kehadiran warna saja kurang memuaskan hasrat kita. Oleh karena itu, kita bisa memasang foto atau gambar sebagai latar belakang. Secara default, gambar atau foto yang dipilih sebagai latar belakang akan disajikan secara tiled atau berulang kali menyerupai Pemasangan tegel sehingga memenuhi seluruh bagian halaman web Yang sedang kita desain.
Untuk meletakkan foto atau gambar sebagai latar belakang, telah takan atribut khusus bernama background-image: url(image). Tips Menggunakan Latar belakang pada Halaman Web
Contoh, Anda bisa menulis script HTML berikut ini:
Dan Hasilnya
 |
| Halaman page yang dilatar belakangi oleh pola gambar |
Bagaimana menjelaskan script di atas? Dalam script HTML di atas, kita menggunakan gambar latar belakang dari sebuah file bernama “stripe.png”. Selanjutnya, gambar latar belakang itu akan disajikan berulang-ulang hingga menciptakan pola-pola warna yang menarik di seluruh bagian halaman. :
Dalam praktiknya, web designer melibatkan pula atribut untuk menentukan warna latar belakang dan latar depan meskipun dalam waktu yang bersamaan memanfaatkan pula gambar atau foto sebagai latar belakang.
Alasan di balik penggunaan warna latar belakang dan latar depan sebenarnya cukup klasik. Misalnya saja, jika file gambar yang telah ditentukan menjadi latar belakang ternyata tidak ditemukan oleh browser maka untuk menggantikannya, warna latar belakang akan muncul sebagai penggantinya. Tips Menggunakan Latar belakang pada Halaman Web
Jadi, Anda bisa menuliskannya seperti ini:
Pengulangan Gambar Latar Belakang
Secara default, gambar atau foto latar belakang akan disajikan secara berulang ke arah horizontal dan ke arah vertikal sekaligus. Dengan demikian, apabila gambar atau foto tersebut memiliki ukuran yang lebih kecil dibanding halaman web page yang sedang Anda buat, gambar tersebut akan diletakkan berulang-ulang. Pada contoh latihan di atas, sebenarnya latar belakang yang tercipta merupakan pengulangan dari gambar kecil sebagai berikut:
 |
| Gambar asli yang sebenarnya hanya diulang-ulang |
Jika Anda tidak ingin gambar tersebut diletakkan secara berulang-ulang, Anda bisa mematikannya menggunakan atribut background. repeat. Ada tiga value yang bisa Anda isikan, yaitu repeat-x untuk menduplikasi (mengulang) gambar secara horizontal saja, repeat-y untuk menduplikasi gambar secara vertikal saja, atau tidak ada duplikasi sama sekali dengan menggunakan no-repeat. Tips Menggunakan Latar belakang pada Halaman Web
Cobalah tulis script HTML di bawah ini dan lihatlah perbedaannya:
Selain itu, anda juga bisa menggunakan atribut background-attachment: fixed yang fungsinya untuk menstabilkan posisi gambar latar belakang. Tanpa atribut ini, apabila kita menggulung
layar (scrolling), maka gambar latar belakang itu, jika tidak diulang-ulang, akan ikut tergulung, Tapi jika atribut tersebut kita aktifkan, posisi gambar latar belakang akan tetap stabil di tempatnya (tidak terpengaruh oleh scrolling layar).
Meletakkan Gambar
Gambar dapat berupa ilustrasi, foto, atau file-file lain yang didukung untuk ditampilkan di jendela browser, seperti JPEG, PNG, GIF, dan sebagainya. Untuk meletakkan gambar di dalam desain website, kita. dapat menggunakan tag <img>. Tag ini bekerja sama dengan atribut Src. Tips Menggunakan Latar belakang pada Halaman Web
Atribut src, singkatan dari source, merupakan atribut yang berisi alamat dari file gambar yang akan ditampilkan. Alamat ini bisa berjenis alamat relatif atau atau alamat absolute.
Untuk membuat contoh kode HTML tentang penggunaan tag <img> ini, langkah pertama yang dilakukan adalah sediakan sebuah file gambar yang akan ditampilkan di jendela browser, kemudian tempatkan file gambar tersebut ke dalam satu folder dengan file halaman HTML. Tips Menggunakan Latar belakang pada Halaman Web
Pada contoh di bawah ini terdapat sebuah file gambar bernama logo.png yang berada dalam satu folder dengan halaman HTML saat ini.
Dan hasilnya
 |
Gambar logo yang dimasukan ke dalam halaman web |
Tag <img> tidak memiliki elemen sehingga anda tidak perlu menutup tag ini menggunakan tag penutup, melainkan bisa langsung menulis <img…/>
Atribut Alt
Tag <img> juga dilengkapi atribut penting lainnya, yaitu alt. Atribut alt adalah singkatan dari alternative description, yang digunakan untuk memberi keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser, baik karena koneksi internet yang buruk atau jika web browser, telah diatur untuk tidak menampilkan gambar demi penghematan bandwith, Tips Menggunakan Latar belakang pada Halaman Web
Contoh penggunaan atribut alt tag <img> sebagai berikut :
Apabila gambar tidak muncul di jendela browser, di image placeholder atau kotak tempat gambar itu seharusnya ditampilkan akan tertulis teks dari atribut alt ini (dalam contoh di atas adalah teks "logo baru”).
Width dan Height
Atribut lainnya yang akan kita bahas mengizinkan kita untuk menentukan ukuran gambar yang ditampilkan dalam jendela browser. Atribut itu, yaitu width dan height. Tips Menggunakan Latar belakang pada Halaman Web
Contoh penggunaan atribut width dan height pada tag <img>:
Dan Hasilnya
 |
| Ukuran gambar bisa diatur menggunakan atribut width dan height |
Saat pengaturan gambar menggunakan kedua atribut tersebut mungkin saja gambar terlihat tidak proporsional karena Penggung, atribut width dan height yang tidak simetris.
Untuk mempertahankan proporsi gambar Har gambar menjadi besar/kecil, cantumkan hanya salah satu ALIBI Saja (width saja atau height saja). Misalnya, jika kita mengisi atribut width - "300" tanpa mencantumkan height, web browser akan menampilkan gambar dengan lebar 300px dan menghitung secara otomatis tinggi gambar secara simetris sehingga gambar tetap proporsional. Tips Menggunakan Latar belakang pada Halaman Web
Umumnya, web server akan menampilkan teks terlebih dahulu baru mengirim gambar ke jendela browser. Untuk web server yang memiliki trafik internet sangat tinggi, lambatnya akses internet akan menyebabkan teks-teks itu berpindah tempat karena gambar yang terlambat ditampilkan. Mencantumkan ukuran dari gambar dengan atribut width dan height akan memberikan kesempatan kepada browser untuk mempersiapkan ukuran tersebut untuk peletakan gambar sehingga teks tidak akan berpindah tempat.
Memilih Format Graphic
Ada banyak jenis format graphic yang ada di dunia ini dari. yang sangat spesifik, seperti PSD-nya photoshop hingga yang paling umum dan berumur cukup tua, seperti GIF. namun pada umumnya di dunia HTML para web designer memanfaatkan format-format yang paling populer, seperti GIF, JPEG, dan PNG
Menyiapkan File Graphic
Minimal, Anda sudah mengetahui file format apa yang ingin Anda pakai dalam desain web page. Setelah Anda memilih format tersebut, Anda tentukan juga seberapa besar graphic (foto atau gambar) itu muncul di dalam web page. Besar kecilnya gambar ditentukan oleh resolusi yang direpresentasikan dalam tinggi dan lebar. Sebagai Contoh, graphic dengan resolusi 800x600 memiliki arti bahwa gambar itu memiliki lebar 800 pixel dan tinggi sebesar 600 pixel.
Ada dua cara mengatur ukuran gambar di dalam web page, yaitu: Tips Menggunakan Latar belakang pada Halaman Web
Anda gunakan software image editing seperti Photoshop untuk memperkecil atau memperbesar resolusi gambar. Dengan cara seperti ini, ukuran yang muncul di dalam web page benar-benar ukuran rill. Disarankan anda menggunakan metode ini karena anda bisa memprediksi ukuran file gambar yang akan diletakan di dalam web umumnya. semakin besar resolusi sebuah gambar maka semakin besar pula filenya.
Cara kedua adalah dengan mengatur ukurannya lewat kode-kode HTML secara langsung. itu artinya, anda menyerahkan pengaturan besar kecil gambar menggunakan atribut-atribut pada tag HTML metode seperti ini memang praktis namun tidak mempengaruhi ukuran file gambar yang akan tampil di jendela web page. Artinya gambar yang anda perkecil tetap saja memiliki ukuran file yang sama.
Variasi Memasukkan Gambar
Cukup mudah memasukkan graphic, baik foto maupun gambar, ke dalam web page. Anda bisa memanfaatkan tag <img> dan menyebut nama file gambar yang akan diletakkan. Contohnya seperti ini:
Pada contoh penulisan script di atas, diasumsikan bahwa file gambar itu berada dalam folder yang sama dengan script HTML yang sedang Anda buat. Jika letaknya berbeda, Anda bisa menggunakan absolute path atau relative path yang pernah kita pelajari.
Coba Anda tulis script HTML berikut ini untuk menghadirkan" gambar dalam web page:
 |
| Gambar di dalam web page |
Secara default, teks-teks akan diletakkan di bag Bamba walaupun gambar itu secara horizontal —menyIsakan ruang kosong di sisi kanannya. Agar teks bisa “naik” ke atas Sehingga. sejajar dengan gambar atau foto, Anda bisa menggunakan float day, mengisinya dengan atribut left atau right. Tips Menggunakan Latar belakang pada Halaman Web
Berikut contohnya: Tips Menggunakan Latar belakang pada Halaman Web
 |
| yang “naik” hingga ke sisi gambar |
kalau anda ingin dalam keseluruhan web page seluruh teks sejajar dengan foto atau gambar, buatlah float itu di area style sehingga anda bisa menuliskannya seperti ini :
Bagaimana kalau anda menggantinya dengan right? gambar akan diletakan di sisi kanan dan teks teks di sisi kirinya (terbalik)
 |
| foto atau gambar yang diletakan di sisi kanan |
Hyperlink Menggunakan Graphic
Graphic pun, baik foto maupun gambar, bisa menjadi pemicu sebuah link. Jika sebelumnya kita bekerja menggunakan teks sebagai hyperlink, sekarang saatnya memanfaatkan graphic sebagai hyperlink. Caranya adalah dengan menggabungkan tag <a> dan <img>. Berikut contoh script-nya:
 |
| gambar yang telah berubah menjadi link |
Secara default, gambar yang telah dijadikan sebuah link akan dikelilingi border. Apabila Anda tidak ingin ada border di sekeliling foto atau gambar ber-link, hilangkan dengan menggunakan border-none. Tips Menggunakan Latar belakang pada Halaman Web
Menggunakan Figure
HTML5 memperkenalkan tag baru bernama <figure> tag ini fungsinya lebih semacam wadah untuk meletakan tag <img> di dalamnya. jadi secara umum, penggunaan tag <figure> ini adalah sebagai berikut;
kalau anda menggunakan tag <figure> maka anda bisa memanfaatkan tag lain yang masih dalam satu keluarga dengan <figure>. yaitu <Figurecaption>. Fungsinya adalah untuk menulis keterangan pada sebuah gambar. keterangan itu akan selalu menempel pada gambar secara umum. penggunaanya sebagai berikut :
Berikut, salah satu script HTML yang membantu anda memahami bagaimana menggunakan tag <figure> dan <figurecaption> : Tips Menggunakan Latar belakang pada Halaman Web
0 Komentar